import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import Button from '../../components/common/button';
import { not } from '../../utils/validator';
import toast from '../../utils/toast';
import cardIcon from '../../../assets/images/qiji/card/card.png';

@connect((state) => {
  const { loading, card } = state;
  return {
    loading: loading.effects['card/recharge'],
    error: card.get('error'),
  };
})

class RechargeCard extends BaseComponent {
  state = {
    number0: '',
    number1: '',
    number2: '',
    number3: '',
  }

  componentDidMount() {
    this.input0.focus();
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'card/clearError',
    });
  }

  numberChange = (index, e) => {
    this.props.dispatch({
      type: 'card/clearError',
    });
    const number = e.target.value.replace(/[^0-9]/g, '');
    console.log(number, index);
    if (number.length >= 4 && index < 3) {
      // 如果下一个输入框是空的，把输入的字符带过去
      if (this.state[`number${index + 1}`].length === 0 && number.length === 5) {
        this.setState({
          [`number${index + 1}`]: number.substr(4, 1),
        });
      }
      // 下一个输入框获得焦点
      this[`input${index + 1}`].focus();
    }

    if (number.length === 0 && index > 0) {
      this[`input${index - 1}`].focus();
    }
    this.setState({
      [`number${index}`]: number.substr(0, 4),
    });
  }

  keyDown = (index, e) => { // 处理删除，因为输入框为空时删除不会触发onchange
    console.log('key down', index, e.key, e.keyCode, e.target.value);
    if (index > 0 && e.keyCode === 8 && e.target.value.length === 0) {
      this[`input${index - 1}`].focus();
    }
  }

  submit = () => {
    const { number0, number1, number2, number3 } = this.state;
    const number = `${number0}${number1}${number2}${number3}`;
    if (not('card16', number)) {
      toast('请输入正确的卡密');
    } else {
      this.props.dispatch({
        type: 'card/exchangeCard',
        payload: {
          couponCardPwd: number,
        },
      });
    }
  }

  renderLine = (index) => {
    const { number } = this.state;
    if (number.length >= index && number.length < index + 4) {
      return <div className="line" />;
    } else {
      return null;
    }
  }

  render() {
    // FIXME: 光标颜色
    const { number0, number1, number2, number3 } = this.state;
    const { loading, error } = this.props;
    let errView;
    if (error) {
      errView = (
        <div className="error">
          {error}
        </div>
      );
    }
    return (
      <div className="exchange-card-qiji">
        <div className="title-row">
          <img src={cardIcon} alt="" className="icon" />
          <div className="title">权益兑换</div>
        </div>
        <div className="content-view">
          <div className="title">请输入鱿鱼加油会员权益年卡兑换密码</div>
          <div className="number-view">
            <div className="input-cell">
              <input
                className="input"
                type="tel"
                ref={input => this.input0 = input}
                maxLength={5}
                value={number0}
                onChange={e => this.numberChange(0, e)}
                onKeyDown={e => this.keyDown(0, e)}
              />
            </div>
            <div className="input-cell">
              <input
                className="input"
                type="tel"
                ref={input => this.input1 = input}
                maxLength={5}
                value={number1}
                onChange={e => this.numberChange(1, e)}
                onKeyDown={e => this.keyDown(1, e)}
              />
            </div>
            <div className="input-cell">
              <input
                className="input"
                type="tel"
                ref={input => this.input2 = input}
                maxLength={5}
                value={number2}
                onChange={e => this.numberChange(2, e)}
                onKeyDown={e => this.keyDown(2, e)}
              />
            </div>
            <div className="input-cell">
              <input
                className="input"
                type="tel"
                ref={input => this.input3 = input}
                maxLength={5}
                value={number3}
                onChange={e => this.numberChange(3, e)}
                onKeyDown={e => this.keyDown(3, e)}
              />
            </div>
          </div>
          {errView}
          <Button title="确定" clickFunc={this.submit} className="submit-btn" disabled={loading} />
        </div>
      </div>
    );
  }
}

export default RechargeCard;

